<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>component ref</title>
	<script src="js/vue.js"></script>
</head>
<body>
	<div id="app">
		<div style="background-color: aliceblue">
			<button @click="printChildRef">打印子组件内容</button>
			<child-a  ref="childA"></child-a>
		</div>
	</div>
<script>
    Vue.component('child-a',{
        template: '<div>子组件</div>',
        data: function () {
            return {
                message: '子组件内容'
            }
        }
    });

   new Vue({
       el: '#app',
	   methods: {
           printChildRef: function () {
			   var msg = this.$refs.childA.message;
			   console.log(msg);
           }
	   }
   })
</script>
</body>
</html>